<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>wx demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script>
        document.write('<link rel="stylesheet" href="stylesheets/wx.css?' + (+new Date()) + '">');
    </script>
    <style>
        body {padding-top: 40px; padding-bottom: 40px; background: #666666; font-family: "Heiti SC", "DroidSansFallback",  "微软雅黑";}
        .mobileframe {background: #ebebeb; overflow: hidden; height: 640px; margin-bottom: 40px; position: relative;}
        .mobileframe .wx-menu {position: absolute;}
        @media (max-width: 480px) {
            .col-lg-4, .col-sm-6 {
                padding: 0;
            }
        }
    </style>
</head>
<body>
    <script>
        // 支持物理像素
        if (window.devicePixelRatio && devicePixelRatio >= 2) {
            var testElem = document.createElement('div');
            testElem.style.border = '.5px solid transparent';
            document.body.appendChild(testElem);
            if (testElem.offsetHeight == 1) {
                document.querySelector('html').classList.add('hairlines');
            }
            document.body.removeChild(testElem);
        }
    </script>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-sm-6">
                <div class="mobileframe">
                    <ul class="wx-messages">
                        <li class="wx-item">
                            <div class="wx-time">早上10:24</div>
                            <span class="wx-icon wx-icon-apple">
                                <i class="fa fa-wechat"></i>
                            </span>
                            <div class="wx-name">微信团队</div>
                            <div class="wx-content">微信团队：登陆操作通知</div>
                        </li>
                        <li class="wx-item">
                            <div class="wx-time">早上05:12</div>
                            <span class="wx-icon wx-icon-bostonblue">
                                <i class="fa fa-line-chart"></i>
                            </span>
                            <div class="wx-name">理财通</div>
                            <div class="wx-content">理财通：网银大额充值开通提醒</div>
                        </li>
                        <li class="wx-item">
                            <div class="wx-time">凌晨02:56</div>
                            <span class="wx-icon wx-icon-sanmarino">
                                <i class="fa fa-envelope"></i>
                            </span>
                            <div class="wx-name">腾讯企业邮箱</div>
                            <div class="wx-content">腾讯企业邮箱：新邮件通知</div>
                        </li>
                        <li class="wx-item">
                            <div class="wx-time">凌晨01:28</div>
                            <span class="wx-icon wx-icon-sanmarino">
                                <i class="fa fa-credit-card"></i>
                            </span>
                            <div class="wx-name">通讯录安全助手</div>
                            <div class="wx-content">您已经16天没有备份了</div>
                        </li>
                        <li class="wx-item">
                            <div class="wx-time">昨天</div>
                            <span class="wx-icon wx-icon-darkcoral">JD</span>
                            <div class="wx-name">京东JD.COM</div>
                            <div class="wx-content">简单的文本也能做出像摸像样的图标</div>
                        </li>
                        <li class="wx-item">
                            <div class="wx-time">周二</div>
                            <span class="wx-icon wx-icon-rawsienna">淘</span>
                            <div class="wx-name">淘宝</div>
                            <div class="wx-content">不过以上图标都只是拙劣的模仿</div>
                        </li>
                        <li class="wx-item">
                            <div class="wx-time">周一</div>
                            <img src="http://upload.wikimedia.org/wikipedia/commons/8/88/Farbkreis_Itten_1961.png" class="wx-icon">
                            <div class="wx-name">Farbkreis</div>
                            <div class="wx-content">如果想精致一些就果断使用图片吧</div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-lg-4 col-sm-6">
                <div class="mobileframe">
                    <div class="wx-group">
                        <div class="wx-contacts">
                            <a class="wx-item">
                                <span class="wx-icon wx-icon-rawsienna">
                                    <i class="fa fa-user-plus"></i>
                                </span>
                                <div class="wx-name">新的朋友</div>
                            </a>
                            <a class="wx-item">
                                <span class="wx-icon wx-icon-apple">
                                    <i class="fa fa-users"></i>
                                </span>
                                <div class="wx-name">群聊</div>
                            </a>
                            <a class="wx-item">
                                <span class="wx-icon wx-icon-sanmarino">
                                    <i class="fa fa-tag"></i>
                                </span>
                                <div class="wx-name">标签</div>
                            </a>
                            <a class="wx-item">
                                <span class="wx-icon wx-icon-bostonblue">
                                    <i class="fa fa-user-times"></i>
                                </span>
                                <div class="wx-name">公众号</div>
                            </a>
                        </div>
                    </div>
                    <div class="wx-group">
                        <div class="wx-title">企业号</div>
                        <div class="wx-contacts">
                            <a class="wx-item">
                                <span class="wx-icon wx-icon-bostonblue">
                                    <i class="fa fa-paper-plane"></i>
                                </span>
                                <div class="wx-name">企业号管理员助手</div>
                            </a>
                        </div>
                    </div>
                    <div class="wx-group">
                        <div class="wx-title">W</div>
                        <div class="wx-contacts">
                            <a class="wx-item">
                                <span class="wx-icon wx-icon-apple">
                                    <i class="fa fa-wechat"></i>
                                </span>
                                <div class="wx-name">微信团队</div>
                            </a>
                            <a class="wx-item">
                                <span class="wx-icon wx-icon-apple">
                                    <i class="fa fa-folder-open-o"></i>
                                </span>
                                <div class="wx-name">文件传输助手</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-sm-6">
                <div class="mobileframe">
                    <div class="wx-group">
                        <div class="wx-title"></div>
                        <ul class="wx-functions">
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-apple wx-yang">
                                    <i class="fa fa-circle-o"></i>
                                </span>
                                <div class="wx-name">朋友圈</div>
                            </li>
                        </ul>
                    </div>
                    <div class="wx-group">
                        <div class="wx-title"></div>
                        <ul class="wx-functions">
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-sanmarino wx-yang">
                                    <i class="fa fa-qrcode"></i>
                                </span>
                                <div class="wx-name">扫一扫</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-sanmarino wx-yang">
                                    <i class="fa fa-coffee"></i>
                                </span>
                                <div class="wx-name"><span style="display: none;">喝前</span>摇一摇</div>
                            </li>
                        </ul>
                    </div>
                    <div class="wx-group">
                        <div class="wx-title"></div>
                        <ul class="wx-functions">
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-sanmarino wx-yang">
                                    <i class="fa fa-users"></i>
                                </span>
                                <div class="wx-name">附近的人</div>
                            </li>
                        </ul>
                    </div>
                    <div class="wx-group">
                        <div class="wx-title"></div>
                        <ul class="wx-functions">
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-darkcoral wx-yang">
                                    <i class="fa fa-shopping-cart"></i>
                                </span>
                                <div class="wx-name">购物</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-apple wx-yang">
                                    <i class="fa fa-gamepad"></i>
                                </span>
                                <div class="wx-name">游戏</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-sm-6">
                <div class="mobileframe">
                    <div class="wx-group">
                        <div class="wx-title"></div>
                        <ul class="wx-settings">
                            <li class="wx-item">
                                <span class="wx-content">wx</span>
                                <div class="wx-name">名称</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-content">v0.3.0</span>
                                <div class="wx-name">版本</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-content">xiongliding</span>
                                <div class="wx-name">作者</div>
                            </li>
                        </ul>
                    </div>
                    <div class="wx-group">
                        <div class="wx-title"></div>
                        <ul class="wx-settings">
                            <li class="wx-item">
                                <span class="wx-content"><a href="http://git.oschina.net/xiongliding/wx">git.oschina.net</a></span>
                                <div class="wx-name">代码</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-content"><a href="http://wxcss.oschina.mopaas.com/demo.html">wxcss.oschina.mopaas.com</a></span>
                                <div class="wx-name">演示</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-sm-6">
                <div class="mobileframe">
                    <div class="wx-group">
                        <div class="wx-title">12种色彩</div>
                        <ul class="wx-functions">
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-apple">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Apple</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-bostonblue">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Boston Blue</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-sanmarino">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">San Marino</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-blueviolet">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Blue Violet</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-deeplilac">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Deep Lilac</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-mulberry">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Mulberry</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-darkcoral">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Dark Coral</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-rawsienna">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Raw Sienna</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-tussock">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Tussock</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-turmeric">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Turmeric</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-wattle">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Wattle</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-androidgreen">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Android Green</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-sm-6">
                <div class="mobileframe">
                    <div class="wx-group">
                        <div class="wx-title">图标也可以使用阳文，并保证整体的大小一致</div>
                        <ul class="wx-functions">
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-apple wx-yang">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Apple</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-bostonblue">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Boston Blue</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-sanmarino wx-yang">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">San Marino</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-blueviolet">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Blue Violet</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-deeplilac wx-yang">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Deep Lilac</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-mulberry">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Mulberry</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-darkcoral wx-yang">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Dark Coral</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-rawsienna">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Raw Sienna</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-tussock wx-yang">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Tussock</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-turmeric">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Turmeric</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-wattle wx-yang">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Wattle</div>
                            </li>
                            <li class="wx-item">
                                <span class="wx-icon wx-icon-androidgreen">
                                    <i class="fa fa-flag"></i>
                                </span>
                                <div class="wx-name">Android Green</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- wx-news -->
            <div class="col-lg-4 col-sm-6">
                <div class="mobileframe">
                    <div class="wx-news">
                        <div class="wx-item">
                            <div class="wx-icon" style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/88/Farbkreis_Itten_1961.png)"></div>
                            <div class="wx-name">
                                宽高等比缩放居中填充，微信标准模式
                            </div>
                        </div>
                        <div class="wx-item">
                            <div class="wx-icon wx-icon-apple">D</div>
                            <div class="wx-name">
                                Debitis libero aperiam blanditiis!
                            </div>
                        </div>
                        <div class="wx-item">
                            <div class="wx-icon wx-icon-bostonblue">I</div>
                            <div class="wx-name">
                                Dolor repellendus tempora illo suscipit ex molestias blanditiis.
                            </div>
                        </div>
                        <div class="wx-item">
                            <div class="wx-icon wx-icon-sanmarino">Y</div>
                            <div class="wx-name">
                                Amet voluptatibus consectetur lorem rem eligendi voluptates? Ipsa quam obcaecati nulla ipsa deserunt at numquam. Sunt id fugit cumque iste dolorem? Ab voluptas alias ratione eligendi ad neque minus? Temporibus?
                            </div>
                        </div>
                    </div>

                    <div class="wx-news">
                        <div class="wx-item">
                            <img class="wx-icon" src="http://upload.wikimedia.org/wikipedia/commons/8/88/Farbkreis_Itten_1961.png"/>
                            <div class="wx-name">
                                拉伸图片适应框体，可完整显示图片内容，但变形过度的照片可能会难看
                            </div>
                        </div>
                        <div class="wx-item">
                            <img src="http://upload.wikimedia.org/wikipedia/commons/8/88/Farbkreis_Itten_1961.png" class="wx-icon">
                            <div class="wx-name">
                                Debitis libero aperiam blanditiis!
                            </div>
                        </div>
                    </div>

                    <div class="wx-menu">
                        <div class="wx-item">
                            天地玄黄
                        </div>
                        <div class="wx-item">
                            宇宙洪荒
                        </div>
                        <div class="wx-item">
                            日月盈昃
                        </div>
                        <div class="wx-item">
                            辰宿列张
                        </div>
                    </div>
                </div>
            </div>

            <!-- wx-article -->
            <div class="col-lg-4 col-sm-6">
                <div class="mobileframe">
                    <div class="wx-article">
                        <div class="wx-title">Consectetur adipisci ullam sed quas perferendis.</div>
                        <div class="wx-time">2015-04-23</div>
                        <div class="wx-author">微信团队</div>
                        <div class="wx-content">
                            Laboriosam necessitatibus facilis itaque.
                            Sit lorem suscipit modi quam hic. A dolorum illum eaque?
                            Amet enim expedita nemo voluptatem dicta expedita quod voluptate eligendi?
                            Adipisicing asperiores natus nam quisquam vel eligendi repudiandae quibusdam assumenda!
                        </div>
                    </div>
                </div>
            </div>

            <!-- wx-form -->
            <div class="col-lg-4 col-sm-6">
                <div class="mobileframe">
                    <div class="wx-form">
                        <div class="wx-item">
                            <label class="wx-name">问题和意见</label>
                            <textarea class="wx-content" placeholder="请简要描述你的问题和意见"></textarea>
                        </div>
                        <div class="wx-item">
                            <label class="wx-name">文本框自适应高度的方法</label>
                            <div class="wx-content" contentEditable placeholder="这是一个带有 contentEditable 属性并模拟了 placeholder 属性的 div，它的特点是高度会自动随着文本的增加而升高，但提交表单时必须先用 javascript 获取其内容"></div>
                        </div>
                        <div class="wx-item">
                            <label class="wx-name">上传照片</label>
                            <div class="wx-content">
                                <div style="background-image: url(http://static.pexels.com/wp-content/uploads/2015/02/cliff-nature-river-4630-525x350.jpg)" class="wx-icon"></div>
                                <div style="background-image: url(http://static.pexels.com/wp-content/uploads/2015/02/bird-boat-heron-4490-525x350.jpg)" class="wx-icon"></div>
                                <div class="wx-plus"></div>
                            </div>
                        </div>
                        <button class="wx-button wx-primary">进入公众号</button>
                        <button class="wx-button wx-danger">取消关注</button>
                        <button class="wx-button">举报</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

